<!-- 
  实现一个 FancyList 组件，该组件只处理逻辑，不处理页面表现，就是一个无渲染组件

  逻辑有：
    1. 接口调用
        1. 调用那个接口 让父组件通过 prop 传递过来
        2. 请求第几页
        3. 每页显示多少条
    2. 上拉加载更多，上拉加载下一页
 -->
<template>
  <div class="fancy-list">
    <!-- TODO... -->
    <template v-for="(item, index) in list" :key="index">
      <slot name="item" v-bind="item"></slot>
    </template>
  </div>
</template>

<script>
import { onMounted, onUnmounted, ref, watch, watchEffect } from 'vue'

export default {
  props: {
    apiUrl: {
      type: String,
      required: true,
    },
    // 页码
    page: {
      type: Number,
      default: 1,
    },
    // 每页多少条
    pageSize: {
      type: Number,
      default: 5,
    },
  },

  setup(props) {
    // 基于 props.page 得到自己的 page
    const page = ref(props.page)
    // 列表数据
    const list = ref([])
    // 表示当前是否触底了
    const isBottom = ref(false)

    // 用于发送请求
    async function doFetch() {
      // 组装请求url地址
      const url = `${props.apiUrl}?_page=${page.value}&_limit=${props.pageSize}`
      const resp = await fetch(url).then((response) => response.json())
      console.log(resp)
      // 将resp 赋值给当前的一个响应式数据
      //    追加操作
      list.value = [...list.value, ...resp]
    }

    watchEffect(doFetch)

    // 默认调用一次
    // doFetch()

    // 监听 isBottom
    watch(isBottom, (newVal) => {
      if (newVal) {
        console.log('到底了')
        // page.value++
        page.value++
        // doFetch()
      }
    })

    // 处理滚动事件
    function handleScroll() {
      // 页面高度
      const scrollHeight = document.documentElement.scrollHeight
      // 可视区域高度
      const clientHeight = document.documentElement.clientHeight
      // 当前滚动条距离顶部的距离
      const scrollTop = document.documentElement.scrollTop

      // 判断当前滚动条是否到底了
      if (scrollTop >= scrollHeight - clientHeight - 50) {
        // console.log('到底了')
        // 将 isBottom 设置为 true
        isBottom.value = true
      } else {
        isBottom.value = false
      }
    }

    // 组件挂载完成，监听全局的滚动条事件
    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })

    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll)
    })

    // 注意返回
    return {
      list,
    }
  },
}
</script>
